<template>
    <el-form-item :label="label" prop="period_type" required :class="{'mb8': ruleForm.period_type}">
        <el-radio-group :disabled="disabledStart" v-model="ruleForm.period_type" @change="radioChangePeriodType">
            <el-radio :value="1">固定有效期</el-radio>
            <el-radio :value="2">{{ radioText }}后固定天数内有效</el-radio>
            <el-radio :value="3">{{ radioText }}后当月有效</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item v-if="ruleForm.period_type === 1" prop="periodDateRange">
        <FormRangeDate
            v-model="ruleForm.periodDateRange"
            :disabled-date="disabledDate"
            :disabled="disabled"
            :dis-start="disabledStart"
            @change="onChange"
        />
    </el-form-item>
    <el-form-item v-if="ruleForm.period_type === 2">
        <ul>
            <li class="f-c">
                <span class="pr8">{{ validPeriodText }}后</span>
                <el-form-item class="valid_period__error f-c" prop="valid_period">
                    <GInputNumber
                        v-model="ruleForm.valid_period"
                        id="valid_period"
                        type="integer"
                        clearable
                        :maxlength="12"
                        width="80px"
                        placeholder="请输入天数"
                        @input="onChange"
                    />
                    <span class="pl8">天内有效</span>
                </el-form-item>
            </li>
            <li class="form-tip-color fz11">*填写0为领取当日24点前有效，填写1为次日24点前有效，以此类推</li>
        </ul>
    </el-form-item>
</template>

<script setup lang="ts">
    import FormRangeDate from "@/components/form/FormRangeDate.vue";// 范围日期选择组件

    const props = defineProps({
        label: {
            type: String,
            default: '有效期',
        },
        radioText: {
            type: String,
            default: '购买',
        },
        validPeriodText: {
            type: String,
            default: '购买成功',
        },
        ruleForm: {
            type: Object,
            default: () => {
                return {}
            }
        },
        disabledStart: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        disabledDate: {
            type: Function,
            default: () => {
            }
        },
    });

    const emit = defineEmits(['change', 'input']);
    const { ruleForm }: ObjValueAny = props;
    // 切换 有效期 =============================================
    const radioChangePeriodType = () => {
        ruleForm.periodDateRange = [];
        ruleForm.valid_period = '';
        onChange();
    }
    const onChange = () => {
        emit('change');
        emit('input');
    }
</script>

<style scoped lang="scss">
    .valid_period__error :deep(.el-form-item__error) {
        padding-top: 22px;
    }
</style>